<template>
  <div>
    <div class="bg-white">
      <a-button class="mx-1 my-1" type="link" :icon="h(ArrowLeftOutlined)" @click="goBack">
        返回
      </a-button>
    </div>
    <div class="m-5" v-if="!isStats">
      <Row :gutter="[13, 12]">
        <Col span="24">
          <TransportChart v-if="charType == 'transport'" :chartData="chartData" dateKey="month" />
          <RuleChart
            v-if="charType == 'rule'"
            :chartData="chartData"
            dateKey="month"
            :ifShow="false"
          />
          <jsChart v-if="charType == 'js'" :chartData="chartData" dateKey="month" />
          <StorageChart v-if="charType == 'storage'" :chartData="chartData" dateKey="month" />
          <AlarmChart v-if="charType == 'alarm'" :chartData="chartData" dateKey="month" />
          <NotificationChart
            v-if="charType == 'notification'"
            :chartData="chartData"
            dateKey="month"
          />
        </Col>
        <Col span="24">
          <TransportChart v-if="charType == 'transport'" :chartData="chartData" dateKey="year" />
          <RuleChart
            v-if="charType == 'rule'"
            :chartData="chartData"
            dateKey="year"
            :ifShow="false"
          />
          <jsChart v-if="charType == 'js'" :chartData="chartData" dateKey="year" />
          <StorageChart v-if="charType == 'storage'" :chartData="chartData" dateKey="year" />
          <AlarmChart v-if="charType == 'alarm'" :chartData="chartData" dateKey="year" />
          <NotificationChart
            v-if="charType == 'notification'"
            :chartData="chartData"
            dateKey="year"
          />
        </Col>
      </Row>
    </div>
    <div class="m-5" v-else>
      <RuleCharts :chartData="chartData" :dateKey="dateKey" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Row, Col } from 'ant-design-vue';
  import TransportChart from './TransportChart.vue';
  import RuleChart from './RuleChart.vue';
  import jsChart from './JsChart.vue';
  import StorageChart from './StorageChart.vue';
  import AlarmChart from './AlarmChart.vue';
  import NotificationChart from './NotificationChart.vue';
  import RuleCharts from './RuleCharts.vue';
  import { onMounted, ref, nextTick, h } from 'vue';
  import { useRoute } from 'vue-router';
  import { ArrowLeftOutlined } from '@ant-design/icons-vue';
  import { useGo } from '/@/hooks/web/usePage';

  const dateKey = ref<string>('day');
  const chartData = ref<any>();
  const charType = ref<string>('');
  const isStats = ref<boolean>(false);

  const go = useGo();

  const goBack = () => {
    window.history.back();
  };

  onMounted(() => {
    const route = useRoute();
    if (route.params.data) {
      isStats.value = false;
      charType.value = route.params.chartType as string;
      dateKey.value = route.params.dateType as string;
      nextTick(() => {
        chartData.value = JSON.parse(route.params.data as string);
      });
    } else if (route.params.stats) {
      isStats.value = true;
      chartData.value = JSON.parse(route.params.stats as string);
    } else {
      go('/tb-api/index');
    }
  });
</script>
